<template>
  <div class="layout">
    <Layout>
      <Header>
        <Row>
          <Col span="18">
            <img class="logo" src="../images/iconT.png">
            <label class="system-name">“iSchool”萌团子后台管理系统</label>
          </Col>
          <Col span="6">
            <label class="user">用户名：{{uesrInfo.username}}</label>
            <label
              style  = "color:white;cursor:pointer;"
              @click = "personManage = true"
            >&nbsp;&nbsp;&nbsp;用户管理</label>
            <!-- 用户管理对话框 -->
            <Modal
              v-model    = "personManage"
              title      = "修改个人信息"
              width      = "600"
              @on-ok     = "editPersonMessage"
              @on-cancel = "cancelEdit"
            >
              <Form label-position="right" :label-width="100">
                <FormItem label="用户名">
                  <Input v-model="editUesrName"/>
                </FormItem>
                <FormItem label="密码">
                  <Input v-model="uesrInfo.password"/>
                </FormItem>
              </Form>
            </Modal>
            <router-link to="/">
              <label style="color:white;cursor:pointer;">&nbsp;&nbsp;&nbsp;退出登录</label>
            </router-link>
          </Col>
        </Row>
      </Header>

      <Layout>
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu active-name="1-1" theme="light" width="auto" :open-names="['1']">
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-paper"></Icon>知识管理
              </template>
              <MenuItem name="1-1" to="/index/knowledgeBox">知识体系</MenuItem>
              <MenuItem name="1-2" to="/index/questionCheck">审核问答</MenuItem>
              <MenuItem name="1-3" v-if="uesrInfo.userType != 1" @click.native="checkJudge">人员管理</MenuItem>
              <MenuItem name="1-3" v-else-if="uesrInfo.userType == 1" to="/index/personManage">人员管理</MenuItem>
            </Submenu>
            <Submenu name="2">
              <template slot="title">
                <Icon type="ios-stats"></Icon>数据分析
              </template>
              <MenuItem name="2-1" to="/index/analyzeAllVisitor">总访问量</MenuItem>
              <MenuItem name="2-2" to="/index/analyzeHotSearch">热门搜索</MenuItem>
              <MenuItem name="2-3" to="/index/analyzeDistribution">知识分布</MenuItem>
            </Submenu>
            <!-- <Submenu name="3">
              <template slot="title">
                <Icon type="ios-grid"></Icon>Excel
              </template>
              <MenuItem name="3-1">上传Excel</MenuItem>
              <a href="https://sywd11dom.cn/mtz/excel/download">
                <MenuItem name="3-2">导出Excel</MenuItem>
              </a>
            </Submenu> -->
          </Menu>
        </Sider>
        <Layout :style="{padding: '0 24px 24px'}">
          <router-view></router-view>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import { myGet, myPost } from "../utils/request.js";
import { url } from "../utils/api.js";

export default {
  data() {
    return {
      uesrInfo: {
        username: localStorage.getItem("user_name"),
        userType: localStorage.getItem("user_type"),
        userID  : Number(localStorage.getItem("user_id")),
        password: null
      },
      editUesrName: localStorage.getItem("user_name"),
      personManage: false                               //用户管理对话框
    };
  },
  methods: {
    //取消修改
    cancelEdit() {
      this.editUesrName      = this.uesrInfo.username;
      this.uesrInfo.password = null;
    },
    //修改用户名/密码
    editPersonMessage() {
      var that   = this;
      let url    = that.Api.url.editPersonMessage;
      let params = {
        id      : that.uesrInfo.userID,
        username: that.editUesrName,
        password: that.uesrInfo.password
      };
      console.log(params);
      that.http.post(url, params).then(res => {
        localStorage.setItem("user_name", that.editUesrName);
        that.uesrInfo.username = that.editUesrName;
        that.uesrInfo.password = null;
        that.$Message.success("修改成功!");
      });
    },
    //人员管理无权限提示
    checkJudge() {
      this.$Message.error("您没有权限!");
    }
  },
  mounted() {
    // console.log("主页全局用户信息",this.getUserInfo)
  }
};
</script>
<style>
.layout {
  height       : 100vh;
  border       : 1px solid #d7dde4;
  background   : #f5f7f9;
  position     : relative;
  border-radius: 4px;
  overflow     : hidden;
}

.ivu-layout {
  height: 98%;
}

.system-name {
  color    : white;
  font-size: large;
}

.logo {
  width        : 60px;
  height       : 45px;
  border-radius: 50%;
}

.user {
  color      : white;
  font-size  : 16px;
  font-weight: bold;
}
</style>

